<template>
  <div class="taolun">
    <el-dialog title="批示意见/办理提示" :visible.sync="noticeVisible" width="95%">
      <notice :noticePersonId="noticePersonId" :step="selStep"></notice>
      <div slot="footer" class="dialog-footer" style="overflow:hidden">
        <el-button @click.native="noticeVisible = false" style="float:right">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="讨论决定" :visible.sync="taolundetailshow" width="80%" top="20px" :close-on-click-modal="false" :close-on-press-escape="false">
      <taolundetail :personId='taolunpersonId'></taolundetail>
    </el-dialog>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/selection' }">干部选任</el-breadcrumb-item>
      <el-breadcrumb-item >讨论决定</el-breadcrumb-item>
    </el-breadcrumb>
    <section class="wboxnoborder">
      <div :style="'height:'+tableHeight+'px'">
        <el-scrollbar style="height: calc(100% + 16px);">
            <el-radio-group v-model="departmentCode" @change="changedept" style="margin:15px 15px 0" class="pointRadio">
              <el-radio-button v-if="mangeDep.indexOf('干部一处')>-1" :label="1">
                <el-badge v-if="num1>0" :value="num1" class="item">干部一处事项</el-badge>
                <span v-else>干部一处事项</span>
              </el-radio-button>
              <el-radio-button v-if="mangeDep.indexOf('干部二处')>-1" :label="2">
                <el-badge v-if="num2>0" :value="num2" class="item">干部二处事项</el-badge>
                <span v-else>干部二处事项</span>
              </el-radio-button>
              <el-radio-button v-if="mangeDep.indexOf('干部三处')>-1" :label="3">
                <el-badge v-if="num3>0" :value="num3" class="item">干部三处事项</el-badge>
                <span v-else>干部三处事项</span>
              </el-radio-button>
            </el-radio-group>
            <div style="padding:15px">
              <el-table
                v-loading="listloading"
                row-key="id"
                border
                :data="tableData5"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange5">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column
                  type="index"
                  label="序号"
                  width="50">
                </el-table-column>
                <el-table-column
                  prop="realName"
                  label="人选姓名"
                  width="150">
                </el-table-column>
                <el-table-column label="后续环节" width="250">
                  <template slot-scope="scope">
                    <span v-if="scope.row.statePublicity===-1" style="color:#ccc;text-decoration:line-through">公示</span>
                    <span v-else>公示</span>
                    <span v-if="scope.row.stateRecord===-1" style="color:#ccc;text-decoration:line-through">向中组部备案</span>
                    <span v-else>向中组部备案</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="sendUserName"
                  width="120"
                  label="发送人"
                  show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                  prop="sendTime"
                  width="200"
                  label="发送时间"
                  show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                  width="300"
                  label="批示意见/办理提示"
                  show-overflow-tooltip>
                  <template slot-scope="scope">
                    <el-popover placement="bottom" width="600" trigger="hover">
                      <notice :noticePersonId="scope.row.id" :step="selStep"></notice>
                      <el-button type="primary" slot="reference" @click="showNotice(scope.row.id)">查看详情</el-button>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      @click="showDetailMsg(scope.row.id)">查看详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          <select-group :backflag="false" :selectData="selectData" :selectPerson="selectPerson2" :selApi="selApi" :selStep="selStep" @getList="getList5"></select-group>
        </el-scrollbar>
      </div>
    </section>
  </div>
</template>

<script>
import selectGroup from '../common/SelectGroup2'
import notice from '../common/Notice'
import taolundetail from './Detail'
export default {
  name: 'taolun',
  components: {
    selectGroup,
    notice,
    taolundetail
  },
  data () {
    return {
      num1: 0,
      num2: 0,
      num3: 0,
      listloading: false,
      mangeDep: '',
      departmentCode: '',
      tabdept: '1',
      tableHeight: 100,
      tableData5: [],
      date: '',
      selectData: {
        hjData: [
        ],
        szData: [
        ],
        cnData: [],
        yyData: []
      },
      selectPerson: [], // 公示完成 待报出
      selectPerson2: [], // 已退回
      selApi: 'api/selection/decision/submitApprove',
      selStep: 5,
      noticePersonId: '', // notice persion id
      noticeVisible: false,
      dialogVisible3: false, // 退回批示
      taolunpersonId: '',
      taolundetailshow: false, // 讨论决定完成 查看详情
      detailMsg: {}, // 报部信息 会议信息存储
      msgArr: ['无', '党组会', '司办会']
    }
  },
  methods: {
    showNotice (id) {
      console.log('show notice id:', id)
      this.noticePersonId = id
      this.noticeVisible = true
    },
    getNum () {
      let url = this.$http.defaults.selectionAPI + 'api/selection/statnum/decision/getStatNum2'
      // console.log(url)
      this.$http.get(url).then(res => {
        if (res.data.success === true) {
          this.num1 = res.data.result.num1
          this.num2 = res.data.result.num2
          this.num3 = res.data.result.num3
        } else {
          this.$message({
            message: '数据获取失败',
            type: 'error'
          })
        }
      })
    },
    changedept () {
      this.selectData.hjData = []
      this.selectData.szData = []
      this.selectData.yyData = []
      this.loadSelectData()
      this.getList5()
    },
    loadSelectData () {
      let departmentName = ''
      if (this.departmentCode === 1) {
        departmentName = '干部一处'
      } else if (this.departmentCode === 2) {
        departmentName = '干部二处'
      } else if (this.departmentCode === 3) {
        departmentName = '干部三处'
      }
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/auth/getUsersByRole?roletype=1`)
        .then(response => {
          if (response.data.success) {
            this.selectData.hjData = []
            for (let i = 0; i < response.data.result.length; i++) {
              if (response.data.result[i].unitName === '干部监督处' || response.data.result[i].unitName === departmentName) {
                this.selectData.hjData.push(response.data.result[i])
              }
            }
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/auth/getUsersByRole?roletype=2`)
        .then(response => {
          if (response.data.success) {
            this.selectData.szData = []
            for (let i = 0; i < response.data.result.length; i++) {
              if (response.data.result[i].roleName === 'ROLE_sizhang' || response.data.result[i].manageDep.indexOf(departmentName) > -1 || response.data.result[i].manageDep.indexOf('干部监督处') > -1) {
                this.selectData.szData.push(response.data.result[i])
              }
            }
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/home/getCommonlyOpinions?step=5`)
        .then(response => {
          if (response.data.success) {
            this.selectData.yyData = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    },
    testBtn (item) { // 测试按钮
      console.log('测试按钮item:', item)
    },
    getList5 () { // 已退回
      this.getNum()
      this.listloading = true
      let url = this.$http.defaults.selectionAPI + 'api/selection/decision/getCurrentTodoApproveList'
      console.log('departmentCode: ' + this.departmentCode)
      this.$http.get(url + '?departmentCode=' + this.departmentCode).then(res => {
        this.listloading = false
        console.log('get list5 succ:', res)
        if (res.data.success === true) {
          let rs = res.data.result.persons
          let arr = []
          for (let i of rs) {
            arr.push({
              id: i.id,
              realName: i.realName,
              sendTime: this.getYMDHMS(i.sendTime),
              sendUserName: i.sendUserName,
              opinion: i.opinion,
              statePublicity: i.statePublicity,
              stateRecord: i.stateRecord
            })
          }
          console.log('get list5arr:', arr)
          this.tableData5 = arr
        } else {
          this.$message({
            message: '数据获取失败',
            type: 'error'
          })
        }
      })
    },
    getYMDHMS (timestamp) {
      let time = new Date(timestamp)
      let year = time.getFullYear()
      let month = time.getMonth() + 1
      let date = time.getDate()
      let hours = time.getHours()
      let minute = time.getMinutes()
      let second = time.getSeconds()

      if (month < 10) { month = '0' + month }
      if (date < 10) { date = '0' + date }
      if (hours < 10) { hours = '0' + hours }
      if (minute < 10) { minute = '0' + minute }
      if (second < 10) { second = '0' + second }
      return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
    },
    showDetailMsg (id) {
      this.taolundetailshow = true
      this.taolunpersonId = id
    },
    handleSelectionChange5 (val) { // 讨论决定完成 表格select change
      console.log('tabledata5 val:', val)
      this.selectPerson2 = [...val]
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.$nextTick(function () {
        obj.tableHeight = clientHeight - 165
      })
    }
  },
  mounted () {
    this.mangeDep = localStorage.getItem('mangeDep')
    if (!this.mangeDep || this.mangeDep === '') {
      this.mangeDep = []
    }
    let departmentCodes = []
    if (this.mangeDep.indexOf('干部一处') > -1) {
      departmentCodes.push(1)
    }
    if (this.mangeDep.indexOf('干部二处') > -1) {
      departmentCodes.push(2)
    }
    if (this.mangeDep.indexOf('干部三处') > -1) {
      departmentCodes.push(3)
    }
    this.departmentCode = departmentCodes[0]
    this.loadSelectData()
    console.log('讨论决定')
    this.getList5()
    this.tableresize(this)
    let _this = this
    window.onresize = function windowResize () {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      _this.tableresize(_this)
    }
  }
}
</script>
<style>
.taolun .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
  border-bottom:1px solid #95B8E7;
}
.taolun .el-table td, .el-table th.is-leaf{
  border-right:1px solid #95B8E7;
}
.taolun .wboxnoborder .el-table{
  border: #95B8E7 solid 1px;
}
.taolun .wboxnoborder .el-table th{
  font-weight: normal;
  background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
  text-align: center;
  border-right: #95B8E7 solid 1px;
  border-bottom: #95B8E7 solid 1px;
  min-height: 30px;
  line-height:30px;
}
.taolun .wboxnoborder .el-table td, .el-table th{
  padding:0;
  font-size:var(--size14) !important;
  line-height: 20px;
  font-family: '宋体';
  text-align: center;
}
.taolun .el-table__row{
  height: 50px;
}
</style>
<style scoped>
.taolun {
  width: 100%;
}
.detail-tit {
  width: 100%;
  padding: 0 8px 20px ;
  box-sizing: border-box;
  font-size:var(--size) !important;
  font-weight: bolder;
}
.detail-item {
  width: 100%;
  height: 40px;
  padding: 0 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border-bottom: 0.5px solid #ccc;
}
.detail-item-left {
  width: 15%;
  text-align: right;
  padding-right:20px;
  line-height: 25px;
  font-size:var(--size) !important;
}
.detail-item-right {
  width: 85%;
  font-weight: bolder;
  line-height: 25px;
  font-size:var(--size) !important;
}
.taolun .wboxnoborder {
  padding: 0;
  width: 100%;
  background-color: #fff;
  margin: 0 10px;
  overflow: hidden;
}
</style>
